<template>
<div class="modalIndex" v-if="showModal">
  <div class="modalContent" :style="style">
    <a class="modalClose" v-if="hideClose != ''">
      <Icon size="31" type="ios-close-empty" @click.native="cancelBtnAction($event)"></Icon>
    </a>
    <div class="modalHeader">
      {{title}} <span class="subtitle">{{subtitle}}</span>
    </div>
    <div class="modalBody">
      <slot>
        请输入提示信息
      </slot>
    </div>
    <div class="modalFooter">
        <Button type="primary" @click="okBtnAction($event)">确认</Button>
        <Button style="margin-left:20px;" type="warning" @click="cancelBtnAction($event)">取消</Button>
    </div>
  </div>
   

</div>
</template>


<script>
  
  export default {
    
    props:['showModal','title','subtitle','modalWidth','modalHeight','hideClose'],

    data: function(){
      return {
        style:'',
      };
    },

    methods :{

      //确认按钮
      okBtnAction: function(eventObj) {
        this.$emit("on-ok-modal",{
          "$event":eventObj
        });
      },

      // 取消按钮
      cancelBtnAction: function(eventObj ) {
        this.$emit("on-cancel-modal",{
          "$event":eventObj
        });
      },

      //为空判定
      isEmpty: function(val) {
        var that = this;
        if(val == null || typeof(val) == 'undefined' || val == ''){
          return true;
        } 

        return false;
      },

      getStyle: function() {
        this.style = (this.isEmpty(this.modalWidth) ? '' : 'width:'+this.modalWidth+'px;') 
                    + (this.isEmpty(this.modalHeight) ? '' : 'height:'+this.modalHeight+'px;');
   
      }
    },

    watch: {
      modalWidth: function (newValue, oldValue){
        this.modalWidth = newValue;
        this.getStyle();
      },
      modalHeight: function (newValue, oldValue){
        this.modalHeight = newValue;
        this.getStyle();
      },
      hideClose: function (newValue, oldValue){
        
        this.hideClose = newValue;
      },
      showModal: function(newValue, oldValue){
        var body = document.getElementsByTagName("body");
        if(newValue){
          body[0].style.overflow = 'hidden';
        } else {
          body[0].style.overflow = '';
        }
      }
    },

    mounted: function(){
      this.getStyle();
    },
  }
</script>

<style scoped lang="scss">
  .modalIndex {
    background-color: rgba(55, 55, 55, 0.6);
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    height: 100%; 

    .modalContent {
      padding: 20px 24px 20px 24px;
      min-width: 200px;
      min-height:100px;

      // width: auto;
      margin: 0 auto;
      outline: none;
      top: 100px;
      box-sizing: border-box;

      position: relative;
      background-color: #fff;
      border: 0;
      border-radius: 0px;
      background-clip: padding-box;

      .modalClose {
        font-size: 12px;
        position: absolute;
        right: 24px;
        top: 8px;
        overflow: hidden;
        cursor: pointer;
      }

      .modalHeader {
        display: inline-block;
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        color: #667882;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .subtitle {
          font-size: 14px;
          color: #a8afb2;
        }
      }

      .modalBody {
        height: calc(100% - 70px);
        overflow: auto;
      }

      .modalFooter {
        padding: 12px 0px 0px 0px;
        text-align: right;
      }

    }
  }

</style>


